﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>图形交互编辑（移动位置）</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
<!--    <script src="../../libs/ol/ol-debug.js" type="text/javascript"></script>-->
    <!--  引入第三方插件库 -->
    <script src="../../libs/jquery-1.11.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        body,html,div,ul,li,iframe,p,img{
            border:none;padding:0;margin:0;
        }
        #map{
            width:100%;
            height:570px;
        }
        #menu{
            width:100%;
            height:20px;         
            padding:5px 10px;
            font-size:14px;
            font-family:"微软雅黑";
            left:10px;    
        }
        .checkbox{
             margin-right:30px;
        }
    </style>
</head>
<body>
    <div id="menu">
        <label>修改几何图形：请用鼠标选择修改要素，选中后再修改其几何信息</label>
<!--        <label>修改几何图形：</label>
        <label class="checkbox" ><input type="radio" name="draw" value="modify"/>modify</label>
        <label>移动几何图形：</label>
        <label class="checkbox" ><input type="radio" name="draw" value="move"/>move</label>-->
    </div>
    <div id="map" > 
    </div>
    <script type="text/javascript">

        //实例化Map对象加载地图,默认底图加载MapQuest地图
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.MapQuest({ layer: 'sat' })
                })
            ],
            target: 'map', //地图容器div的ID
            view: new ol.View({
                center: [0, 0], //地图初始中心点
                minZoom: 2,
                zoom: 3
            })
        });

        //绘制的几何图形要素
        var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
        var lineFeature = new ol.Feature(
            new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
        var polygonFeature = new ol.Feature(
            new ol.geom.Polygon([[[-3e6, -1e6], [-3e6, 1e6],
                [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));

        //实例化一个矢量图层Vector作为绘制层
        var source = new ol.source.Vector({ 
            features: [pointFeature, lineFeature, polygonFeature]
        });
        var vector = new ol.layer.Vector({
            source: source,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });
        map.addLayer(vector); //将绘制层添加到地图容器中

        //定义修改几何图形功能控件
        var Modify = {
            init: function () {
                //初始化一个交互选择控件,并添加到地图容器中
                this.select = new ol.interaction.Select();
                map.addInteraction(this.select);
                //初始化一个交互编辑控件，并添加到地图容器中
                this.modify = new ol.interaction.Modify({
                    features: this.select.getFeatures()//选中的要素
                });
                map.addInteraction(this.modify);
                //设置几何图形变更的处理
                this.setEvents();
            },
            setEvents: function () {
                var selectedFeatures = this.select.getFeatures(); //选中的要素
                //添加选中要素变更事件
                this.select.on('change:active', function () {
                    selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
                });
            },
            setActive: function (active) {
                this.select.setActive(active);//激活选择要素控件
                this.modify.setActive(active);//激活修改要素控件
            }
        };
        Modify.init(); //初始化几何图形修改控件
        Modify.setActive(true); //激活几何图形修改控件;
    </script>
</body>
</html>
